<template>
  <view class="flex-col justify-start section_3 pos">
    <view class="flex-col section_6">
      <text class="self-center font_2 text_4">Remind</text>
      <view class="mt-32 flex-col self-stretch group_2">
        <text class="font text_5">Have you configured the on-chain address? Please read carefully:</text>
        <view class="flex-col mt-17">
          <view class="flex-row group_3">
            <view class="shrink-0 self-start section_7"></view>
            <text class="flex-1 font_3 ml-9">Make sure the address you fill in is your real on-chain address.</text>
          </view>
          <view class="mt-14 flex-row group_4">
            <view class="shrink-0 self-start section_7"></view>
            <text class="flex-1 font_3 ml-9">
              If there is an error, you will not be able to obtain platform benefits, or even the recharge will fail.
            </text>
          </view>
          <view class="mt-14 flex-row">
            <view class="shrink-0 self-start section_7"></view>
            <text class="ml-8 flex-1 font_3">
              Once you fill in incorrect information and cause recharge problems, you will be solely responsible for the
              consequences.
            </text>
          </view>
        </view>
      </view>
      <view class="mt-32 flex-col justify-start items-center self-center text-wrapper_2" :disabled="isLoading"
        @click="handleOk">
        <text class="font_2 text_6">Confirm{{ countDownTips }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isLoading: true,
      countDownTime: 5,
      countDownTips: '(5s)',
      interval: null,
    };
  },
  destroyed() {
    clearInterval(this.interval)
    this.interval = null
  },
  methods: {
    handleOk() {
      this.$emit('confirm')
    },
    handleCountDownTime() {
      this.isLoading = true
      this.countDownTips = `(${this.countDownTime}s)`
      this.interval = setInterval(() => {
        if (this.countDownTime < 1) {
          this.countDownTips = ''
          this.countDownTime = 60
          this.isLoading = false
          clearInterval(this.interval)
          this.interval = null
          return
        }

        this.countDownTime--
        this.countDownTips = `(${this.countDownTime}s)`
      }, 1000)
    },
  },
};
</script>
<style scoped lang="scss">
.mt-17 {
  margin-top: 1.06rem;
}

.ml-9 {
  margin-left: 0.56rem;
}

.section_3 {
  padding: 13.81rem 0;
  background-color: #000000cc;

  .section_6 {
    margin: 0 1rem;
    padding: 1.63rem 1rem 1.25rem;
    border-radius: 1.5rem;
    background-image: url('/web/static/common/dialog_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .font_2 {
      font-size: 1rem;
      font-family: PingFang SC;
      line-height: 0.93rem;
      color: #ffffff;
    }

    .text_4 {
      line-height: 0.74rem;
    }

    .group_2 {
      margin-right: 0.63rem;

      .font {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.69rem;
        color: #ffffff;
      }

      .text_5 {
        color: #00f6ff;
        line-height: 0.88rem;
      }

      .group_3 {
        margin-right: 0.5rem;
      }

      .group_4 {
        margin-right: 0.25rem;
      }

      .section_7 {
        margin-top: 0.25rem;
        background-color: #ffffffb3;
        border-radius: 50%;
        width: 0.38rem;
        height: 0.38rem;
      }

      .font_3 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 1.13rem;
        color: #ffffffb3;
      }
    }

    .text-wrapper_2 {
      padding: 1rem 0;
      background-image: linear-gradient(113.8deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
      border-radius: 0.75rem;
      width: 8.75rem;

      .text_6 {
        line-height: 0.93rem;
      }
    }
  }
}

.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>